<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>青春，你好。毕业，再见。</title>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<style>
			*{padding: 0;margin: 0;}
			html,body{width:100%;height:100%;}
			body{font-family: "楷体";}
			.swiper-container,.swiper-wrapper,.swiper-slide{width:100%;height:100%;}
			img{display: block;border: 0;}
			.swiper-container,.swiper-wrapper,.swiper-slide{width: 100%;height: 100%;}
			.swiper-container{position: relative;}
			.swiper-slide{width: 100%;height: 100%;background:url(img/bg2.jpg) no-repeat;background-size:100% 100%;}
			.swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2320B2AA'%2F%3E%3C%2Fsvg%3E");transform:rotate(270deg);}
			.swiper-button-next, .swiper-button-prev{position: absolute;top: 97%;left: 46%;z-index: 100;cursor: pointer;background-size:1rem 1.5rem;width: 1rem;height:1.5rem;}
			.page1{width: 100%;height: 100%;background: url(img/bg1.jpg) no-repeat;background-size:100% 100%;position: relative;}
			.page1 p:nth-child(1){position: absolute;left: 50%;top: 30%;font-size: 0.99rem;color: #007AFF;}
			.page1 p:nth-child(2){position: absolute;left: 50%;top: 35%;font-size: 0.99rem;color: #007AFF;}
			.page1 p:nth-child(3){position: absolute;left: 30%;top: 45%;font-size: 0.86rem;color: plum;}
			.page1 img{position: absolute;bottom: 2%;left: 10%;width: 11.55rem;height:10.55rem;transform:rotate(370deg);}
			
			.page2 p:nth-child(1){position: absolute;left: 8%;top: 3%;font-size: 0.99rem;color: #ccc;}
			.page2 p:nth-child(2){position: absolute;left: 14%;top: 8%;font-size: 0.99rem;color: #ccc;}
			.page2 p:nth-child(3){position: absolute;left: 20%;top: 14%;font-size: 0.99rem;color: #ccc;}
			.page2 img:nth-child(4){width: 11.55rem;height:10.55rem;position: absolute;top: 26%;left: 10%;border: 0.3rem solid #fff;}
			.page2 img:nth-child(5){width: 10.55rem;height:9.55rem;position: absolute;bottom: 6%;left: 20%;border: 0.3rem solid #fff;}
			
			.page3 p:nth-child(1){position: absolute;left: 8%;top: 13%;font-size: 1.2rem;color: #F5DEB3;}
			.page3 img:nth-child(2){width: 11.55rem;height:10.55rem;position: absolute;top: 22%;left: 10%;border: 0.3rem solid #fff;}
			.page3 img:nth-child(3){width: 10.55rem;height:9.55rem;position: absolute;bottom: 9%;left: 20%;border: 0.3rem solid #fff;}
			
			.page4 p:nth-child(1){position: absolute;left: 6%;top: 5%;font-size: 1rem;color: #AFEEEE;}
			.page4 img:nth-child(2){width: 9.6rem;height:12.8rem;position: absolute;top: 16%;left: 10%;border: 0.3rem solid #fff;}
			.page4 img:nth-child(3){width: 7.55rem;height:7.55rem;position: absolute;bottom: 14%;left: 44%;border: 0.3rem solid #fff;}
			.page4 p:nth-child(4){position: absolute;left: 4%;bottom: 5%;font-size: 1rem;color: #AFEEEE;}
			
			.page5 p:nth-child(1){position: absolute;left: 6%;top: 5%;font-size: 1rem;color: #AFEEEE;}
			.page5 img:nth-child(2){width: 8.1rem;height:10.8rem;position: absolute;top:13%;left:21%;border: 0.3rem solid #fff;}
			.page5 img:nth-child(3){width: 13.8rem;height:12rem;position: absolute;top: 45%;left: 5%;border: 0.3rem solid #fff;}
			
			.page6{background:url(img/bg1.jpg) no-repeat;background-size:100% 100%;}
			.page6 p:nth-child(1){position: absolute;left: 18%;top: 45%;font-size: 0.99rem;color: #007AFF;}
			.page6 p:nth-child(2){position: absolute;left: 18%;top: 50%;font-size: 0.99rem;color: #007AFF;}
			.page6 p:nth-child(3){position: absolute;left: 10%;top: 60%;font-size: 0.99rem;color: #007AFF;}
		</style>
	</head>
	<body>
	 	<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide page1">
		        	<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">青春，你好</p>
		        	<p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">大学，再见</p>
		        	<p class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1.9s" swiper-animate-delay="1s">——致敬在202-2的那些时光</p>
		        	<img class="ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="1.8s" swiper-animate-delay="2s" src="img/1.jpg"/>
		        </div>
		        <div class="swiper-slide page2">
	        		<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">那些回不去的岁月</p>
	        		<p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.8s">那些带不走的青春</p>
	        		<p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1.2s">还有我们曾一起走过的地方</p>
	        		<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1.8s" src="img/675734873001501870.jpg"/>
	        		<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="2.1s" src="img/712987076603781842.jpg"/>
		        </div>
		        <div class="swiper-slide page3">
		        	<p class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">那些一起走过无数遍的路</p>
		        	<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1s" src="img/723403806503660793.jpg"/>
		        	<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s" src="img/769944721363078593.jpg"/>
		        </div>
		        <div class="swiper-slide page4">
		        	<p class="ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="1.2s" swiper-animate-delay="0.5s">
		        		故事的开头总是这样，适逢其会，猝不及防；
		        	</p>
		        	<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1s" src="img/112324068512377021.jpg"/>
		        	<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s" src="img/623500248473405754.jpg"/>
		        	<p class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="1.5s" swiper-animate-delay="2s">
		        		故事的结局总是这样，花开两朵，天各一方。
		        	</p>
		        </div>
		        <div class="swiper-slide page5">
		        	<p class="ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="1.2s" swiper-animate-delay="0.5s">
		        		时光不老，我们不散。
		        	</p>
		        	<img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="1.5s" src="img/859337367358709307.jpg"/>
		        	<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="1.8s" src="img/14198274893463820.jpg"/>
		        </div>
		        <div class="swiper-slide page6">
		        	<p class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="2s" swiper-animate-delay="1s">再见，大学</p>
		        	<p class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s" swiper-animate-delay="1.3s">你好，青春</p>
		        	<p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="1.8s">——致我们的毕业季——</p>
		       	</div>
		    </div>
		    <!-- 导航按钮 -->
		    <div class="swiper-button-next swiper-button-black"></div>
		</div>
	 	
	 	<script src="js/swiper.animate1.0.2.min.js"></script>
	 	<script src="js/swiper.min.js"></script>
	 	<script src="js/rem.js"></script>
	 	<script>   
	 		var mySwiper = new Swiper('.swiper-container',{
	 			direction : 'vertical',//垂直滑动
				nextButton:'.swiper-button-next',//导航按钮
				mousewheelControl : true,//鼠标滚轮控制
				 onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				    swiperAnimateCache(swiper); //隐藏动画元素 
				    swiperAnimate(swiper); //初始化完成开始动画
				  }, 
				  onSlideChangeEnd: function(swiper){ 
				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				  } 
	 		})
		 </script>
	</body>
</html>
